<template>
  <div>
    <div class="header">
      <span>{{ title }}</span>
      <i class="el-icon-warning-outline"></i>
    </div>
    <div class="header-main">
      <span>{{ count }}</span>
    </div>
    <div class="main">
      <slot name="charts"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ["title", "count"],
};
</script>

<style scoped>
.header {
  color: rgb(185, 181, 181);
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.header-main {
  font-size: 30px;
  margin-bottom: 10px;
}
.main {
  height: 50px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
</style>